<script setup>
import {getPoster} from './index.js'
import {ref, watch} from 'vue'

const src = ref('')
const vd = ref('')
const img = ref('')
const visible = ref(false)
const props = defineProps({
    url: String
})
const emit = defineEmits(['complete'])

watch(() => props.url, () => {
    getPoster(props.url).then(v => {
        src.value = v
        img.value.onload = () => emit('complete')
    })
}, {immediate: true})

watch(() => vd.value, () => {
    if(vd.value){
        vd.value.oncanplay = () => vd.value.play()
    }
})
</script>

<template>
    <div class="c-webrtc-video-container" @click="visible=true">
        <img :src="src" ref="img">
        <span class="iconfont icon-bofang"></span>
    </div>
    <Teleport to="body" v-if="visible">
        <div class="c-webrtc-video-view" @click="visible=false">
            <div @click.stop>
                <video :src="props.url" controls ref="vd"></video>
            </div>
        </div>
    </Teleport>
</template>